<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web字体</title>
    <style>
        /* 引入字体族 字体的设计太大 导致网络不好的电脑访问较慢 */
        @font-face {
          font-family: "情书字体";
          src: url('./font1/方正手迹.ttf');
        }
        /* 这个是正确的写法 拿来直接用即可*/
        @font-face {
          font-family: "webfont";
          font-display: swap;
          src: url('./font2/webfont.eot'); /* IE9 */
          src: url('./font2/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
          url('./font2/webfont.woff2') format('woff2'),
          url('./font2/webfont.woff') format('woff'), /* chrome、firefox */
          url('./font2/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
          url('./font2/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
        }

        .t1 {
          font-size: 40px;
          font-family: "情书字体";
        }
        .t2 {
          font-size: 40px;
          font-family: 'webfont';
        }
    </style>
</head>
<body>
    <h1 class="t1">春风得意马蹄疾，一日看尽长安花</h1>
    <h1 class="t2">春风得意马蹄疾，一日看尽长安花</h1>
</body>
</html>